<template>
  <div>
    <el-card>
      <el-row>
        <el-alert
          title="注意: 只允许为第三级分类设置相关参数"
          :closable="false"
          type="warning"
          show-icon
        ></el-alert>
      </el-row>
      <el-row>
        <span>选择商品分类：</span>
        <el-cascader
          size="medium"
          v-model="selectdKeys"
          :options="cataList"
          @change="HandleCateTab"
          :props="{
            expandTrigger: 'hover',
            children: 'children',
            value: 'cat_id',
            label: 'cat_name',
          }"
          clearable
        ></el-cascader>
      </el-row>
      <el-tabs v-model="activeName" @tab-click="HandleTabClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button
            type="primary"
            :disabled="isBtnDisabled"
            @click="addParams(true)"
            >添加参数</el-button
          >
          <paramsTable
            ref="paramsTableMany"
            :cateId="cateId"
            @getParams="getParamsData()"
            :thisStatus="true"
          ></paramsTable>
        </el-tab-pane>
        <el-tab-pane label="静态参数" name="only">
          <el-button
            type="primary"
            :disabled="isBtnDisabled"
            @click="addParams(false)"
            >添加参数</el-button
          >
          <paramsTable
            ref="paramsTableOnly"
            @getParams="getParamsData"
            :cateId="cateId"
            :thisStatus="false"
          ></paramsTable>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <addParamsDialog
      ref="addParamsDialog"
      @getParams="getParamsData()"
    ></addParamsDialog>
  </div>
</template>

<script>
import {
  getGoodsCateInfoApi,
  getCateAttryIdApi
} from '@/Utils/Api/gitGoodsInfoApi'
import paramsTable from './paramsTable.vue'
import addParamsDialog from './addParamsDialog.vue'
export default {
  name: 'ParamsView',
  data () {
    return {
      cataList: [],
      addCateInfo: {},
      selectdKeys: [],
      // 动态参数数据
      manyTableData: [],
      // 静态属性数据
      onlyTableData: [],
      activeName: 'many'
    }
  },
  components: {
    paramsTable,
    addParamsDialog
  },
  created () {
    this.getGoodsCateInfoFather()
  },
  mounted () {},
  methods: {
    // 获得父级商品分类
    async getGoodsCateInfoFather () {
      const { data } = await getGoodsCateInfoApi(this.pageInfo)
      if (data.meta.status !== 200) {
        return this.$message({
          type: 'error',
          message: data.meta.msg
        })
      }
      this.cataList = data.data
    },
    // 添加商品分类选择父分类的事件
    async HandleCateTab () {
      if (this.selectdKeys.length !== 3) {
        this.selectdKeys = []
        this.manyTableData = []
        this.onlyTableData = []
        this.$nextTick(() => {
          this.$refs.paramsTableOnly.TableData = []
          this.$refs.paramsTableMany.TableData = []
        })
        return
      }
      this.getParamsData()
    },
    // tab选项改变
    async HandleTabClick () {
      this.getParamsData()
    },
    // 获得列表
    async getParamsData () {
      if (this.selectdKeys.length !== 3) {
        this.selectdKeys = []
        this.manyTableData = []
        this.onlyTableData = []
      }
      if (!this.cateId) {
        return this.$message({
          type: 'error',
          message: '未选择商品分类'
        })
      }
      const { data } = await getCateAttryIdApi(this.cateId, {
        sel: this.activeName
      })
      if (data.meta.status !== 200) {
        return this.$message({
          type: 'error',
          message: data.meta.msg
        })
      }
      data.data.forEach((item) => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
        item.inputVisible = false
        item.inputValue = ''
      })
      console.log(data.data)
      if (this.activeName === 'many') {
        this.manyTableData = data.data
        this.$nextTick(() => {
          this.$refs.paramsTableMany.TableData = this.manyTableData
        })
      } else {
        this.onlyTableData = data.data
        this.$nextTick(() => {
          this.$refs.paramsTableOnly.TableData = this.onlyTableData
        })
      }
      this.$message({
        type: 'success',
        message: data.meta.msg
      })
    },
    // 打开添加弹窗
    addParams (status) {
      this.$nextTick(() => {
        this.$refs.addParamsDialog.dialogVisible = true
        this.$refs.addParamsDialog.cateId = this.cateId
        this.$refs.addParamsDialog.addStatus = status
        this.$refs.addParamsDialog.activeName = this.activeName
      })
    }
  },
  computed: {
    // 如果按钮需要被禁用.则返回true,否则返回fasle
    isBtnDisabled () {
      if (this.selectdKeys.length !== 3) {
        return true
      } else {
        return false
      }
    },
    cateId () {
      if (this.selectdKeys.length === 3) {
        console.log(this.selectdKeys[2])
        return this.selectdKeys[2]
      }
      return null
    },
    titleText () {
      if (this.activeName === 'many') {
        return '动态参数'
      } else {
        return '静态参数'
      }
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.el-button{
  margin: 10px 0;
}
</style>
